<!-- 角色编辑弹窗 -->
<template>
  <div>
    <el-drawer :visible="drawerUserListBoolen"
               size="50%"
               :before-close="handleClose"
               ref="drawer">
      <template v-slot:title>
        <span class="hLabel">{{ isUpdate ? '用户列表' : '用户列表' }}</span>
      </template>
      <el-card shadow="never">
        <!-- 搜索表单 -->
        <role-search @search="reload" />
        <!-- 数据表格 -->

        <ele-pro-table ref="table"
                       :columns="columns"
                       :datasource="datasource"
                       @update:selection="selectionFn"
                       :selection.sync="selection"
                       tool-class="ele-toolbar-form"
                       row-key="id">
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>

          </template>

          <template v-slot:img="{ row }">
            <div><img class="categoryImages"
                   :src="row.img"
                   alt="" /></div>
          </template>
          <template v-slot:superiorUser="{ row }">
            <div v-if="row.p_wachat_nickname">
              <div class="realNameStyle">
                <img class="avaterName"
                     :src="row.p_avatar"
                     alt="" />
                <span>{{ row.p_nickname }}</span>
              </div>
            </div>
            <div v-else>-----</div>
          </template>
          <template v-slot:distributionGrCode="{ row }">
            <el-link type="primary"
                     :underline="false"
                     icon="el-icon-view"
                     @click="openInvoice(row.invite_url)">
              查看
            </el-link>
            <!-- 下载 -->
            <!-- <el-link type="info"
                   :underline="false"
                   icon="el-icon-download"
                   @click="download(row.distributionQrCode)">
            公众号
          </el-link> -->
          </template>
          <!-- 操作列 -->

        </ele-pro-table>
      </el-card>
    </el-drawer>
    <!-- 图片预览 -->
    <el-image-viewer v-if="viewerVisible"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="imgViewArr" />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { userList } from '@/api/userList/index'
// import {
//   userOssSignature,
//   qnyOssSignature
// } from '@/api/creatCenter/material';
// import { storageConfigDetail } from '@/api/storageInfo/index';

// import axios from 'axios';
// import {
//   siteCategoriesInsert,
//   siteCategoriesList,
//   siteCategoriesModify,
//   siteCategoriesDetail
// } from '@/api/serviceManagement/categoriesList';
import RoleSearch from './role-search.vue';
import { upload } from '@/api/saveImg/index'
import { camiList, deleteCami } from '@/api/vIPLevel/index'
export default {
  name: 'pictureEdit',
  components: { ElImageViewer, RoleSearch },
  props: {
    drawerUserListBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: String
  },
  data () {

    return {
      selection: [],
      storageMode: 2,
      options: [],
      imageUrl: '',
      imgViewArr: [],
      viewerVisible: false,
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',

          align: 'center',
          showOverflowTooltip: true,
          sortable: 'custom',
        },
        // {
        //   columnKey: 'index',
        //   type: 'index',
        //   width: 45,
        //   align: 'center',
        //   showOverflowTooltip: true,
        //   fixed: 'left'
        // },
        {
          prop: 'nickname',
          label: '昵称',
          align: 'center',
          showOverflowTooltip: false,
          minWidth: 110,
          slot: 'nickname',
        },
        {
          prop: 'phone',
          label: '手机号',
          align: 'center',
          minWidth: 110
        },


        {
          prop: 'level_name',
          label: '会员等级',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,

        },
        {
          prop: 'balance',
          label: '余额',
          align: 'center',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,

        },
        {
          prop: 'total_income',
          label: '总收益',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,

        },
        {
          prop: 'community_income',
          label: '社群收益',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center',
        },
        {
          prop: 'dazi_income',
          label: '搭子收益',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center',
        },
        {
          prop: 'service_income',
          label: '服务收益',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center',
        },

        {
          prop: 'pName',
          label: '用户上级(推广员)',
          align: 'center',
          showOverflowTooltip: false,
          minWidth: 110,
          //   slot: 'pName',
        },
        {
          prop: 'aName',
          label: '用户上级(合伙人)',
          align: 'center',
          showOverflowTooltip: false,
          minWidth: 110,
          //   slot: 'aName',
        },
        {
          prop: 'distributionGrCode',
          label: '推广海报',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 210,
          slot: 'distributionGrCode'
        },
        {
          prop: 'is_authentication',
          label: '认证状态',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center',
          slot: 'is_authentication',
        },




      ],
      dialogImageUrl: '',
      fileList: [],
      dialogVisible: false,
      // 表单验证规则

      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showChoose: false,
      id: null,
      uidList: []
    };
  },
  activated () {

  },

  computed: {
    orderStatusFn: function () {
      return function (status) {

        let orderStatus = '';
        // 1 待接单 2 接单中 3 完成 4 已结算 4拒绝订单
        orderStatus =
          status == 0 ? '未提交' : status == 1 ? '待审核' : status == 2 ? '审核通过' : '驳回';

        return orderStatus;
      };
    },

  },
  methods: {
    selectionFn (e) {
      console.log(e)
      this.uidList = e.map((item) => {
        return item.id
      })

    },
    /* 表格数据源 */
    datasource ({ page, limit, where }) {
      return userList({
        page,
        limit,
        ...where,


      });
    },
    /* 刷新表格 */
    reload (where) {
      this.$refs.table.reload({ page: 1, where: where });
    },
    closeViewer () {
      this.viewerVisible = false;
    },
    // 下载图片
    handleDownload (file) {
      window.open(file.url);
    },
    // 删除图片
    handleRemove () {
      this.fileList = [];
      this.imageUrl = '';
      this.form.img = this.imageUrl;
    },
    //  图片上传个数超过限制
    exceedFn () {
      this.$message({
        message: '图片上传已达到上限,请删除后再上传',
        type: 'warning'
      });
    },
    handlePictureCardPreview () {
      const imgStr = this.imageUrl;
      console.log(imgStr);
      if (imgStr.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割

          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.viewerVisible = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },
    /* 删除61 */
    remove (row) {
      const loading = this.$loading({ lock: true });
      deleteCami({
        id: row.id,


      })
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload({ level_id: this.id });
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.$emit('update:drawerUserListBoolen', false);
      this.$emit('uidList', this.uidList);
    },
    async handleFileChange (file) {

      this.aliFn(file)
    },
    // 阿里云
    async aliFn (file) {
      this.loading = true;

      let files = file.raw;

      console.log(files)
      // 构建请求参数
      let params = new FormData();
      console.log(params);

      //   params.append('signature', '132321313');
      params.append('file', files);
      console.log(params);

      //   let config = {
      //     headers: {
      //       'Access-Control-Allow-Origin': '*',
      //       'x-oss-callback-Authorization': getToken()
      //     }
      //   };

      const res = await upload(params);
      //   let result = await axios.post(res.host, param, config);
      //   let url = res.host + '/' + date + suffix;
      console.log(res);
      if (res.code == 0) {
        this.form.img = res.data.url
        this.loading = false;
      }
      //   this.form.categoryImages = url;
      //   this.imageUrl = url;
      //   this.loading = false;
    },


  },
  watch: {
    drawerUserListBoolen (visible) {


      console.log(this.selection)
      this.$nextTick(() => {

        if (visible) {
          console.log(this.data);
          if (this.data) {
            this.id = this.data.id;


            this.isUpdate = true;
          } else {
            this.reload({})
            this.isUpdate = false;
          }
        } else {
          this.$nextTick(() => {
            this.$refs['form'].resetFields();
            console.log(this.form);
          });


        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.realNameStyle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .avaterName {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    vertical-align: middle;
    margin-right: 5px;
  }
}
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
.foodsDiv div {
  margin-left: 20px;
  margin-top: 10px;
}
.height83 {
  height: 83vh;
}
.hLabel {
  margin: 10px 0 20px;
  font-weight: 700;
  &::before {
    content: '';
    display: inline-block;
    vertical-align: top;

    margin-right: 5px;
    height: 23px;
    width: 6px;
    background-color: #1e6ceb;
  }
}
.drawer__footer {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
}
</style>
